<template>
	<view style="background-color:#e7e7e7 ; height: 100vh;">
		<back-nav message='领券中心' :back="back"></back-nav>
		<zy-segmented :values="items" activeColor='#73bc3d' @onClickItem="onClickItem"></zy-segmented>
		<!-- 优惠券列表 -->
		<view class="couponsBox">
			<cc-couponList :colors="colors" :couponList="couponList" @itemClick="jumpNext" v-if="flag==0"></cc-couponList>
			<view class="none" v-else>
				<image src="../../../static/noneCoupon.png" mode="aspectFit"></image>
				<text>新鲜加载中...</text>
			</view>
			
		</view>




		<!-- 提示弹框 -->
		<view class="modalDlg-mask" v-if="(showModal)"></view>
		<view class="modalDlg" v-if="(showModal)">
			<view class="page-body">
				<view class="modalDlg-content">您尚未绑定手机号</view>
				<view class="modalDlg-content-item">是否绑定手机号？</view>
				    <view class="modalDlg-footer">
					   <button @click="closeModal" class="modalDlg-btn closeBtn">取消</button>
					   <button @click="confirmModal" form-type="submit" class="modalDlg-btn confirmBtn"
						open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">确定</button>
				</view>
			</view>
		</view>
		<view class="bottomBox" v-if="flag==0">
			<view class="myCoupon" @click="JumpMyCoupon">
				<p>我的优惠券</p>
			</view>
			<view class="dingyue">
				<uni-icons type="weixin" size="30" color="#21c200"></uni-icons>
				<p>订阅特权活动通知</p>
			</view>
		</view>
		<view class="bottomBox" v-else>
			<view class="myCoupon2" @click="JumpMyCoupon">
				<p>我的优惠券</p>
			</view>
		</view>
	</view>
</template>

<script>
	import appconf from "@/common/appconf.js";
	import zySegmented from "@/uni_modules/zy-segmented-control/components/zy-segmented-control/zy-segmented-control.vue";
	// import cc-couponList from "@/uni_modules/cc-couponList/components/cc-couponList/cc-couponList.vue";
	const domain = appconf.domain;
	export default {
		components: {
			zySegmented
		},
		data() {
			return {
				flag:0,
				noneFlag:false,
				items: ['今日秒杀', '下期预告'], //分段器名称
				current: 1, //分段器默认初始值
				pageSize: 10,
				pages: 1,
				banner: [], // 优惠券
				bannerPhoto: [],
				domain: appconf.domain,
				activityId: "", // 活动id
				// Receive:false,
				disabaled: false,
				telephone: '',
				showModal: false,
				newDomain: '',
				colors: '#dfe6f1',
				couponList: [{
						name: '满105减5',
						dates: '2023-07-09 2023-08-02',
						status: 0,
						money: 105,
						sub: 5
					},
					{
						name: '满200减10',
						dates: '2023-07-19 2023-08-22',
						status: 0,
						money: 200,
						sub: 10
					}, {
						name: '满100减10',
						dates: '2023-05-09 2023-06-02',
						status: 1,
						money: 100,
						sub: 10
					},
					{
						name: '满400减20',
						dates: '2023-04-09 2023-05-08',
						status: 1,
						money: 400,
						sub: 20
					}
				],
				previewCoupon:[]
			}
		},
		onLoad() {
			const onLogin = () => {
				this.getActive();
			}
			this.$util.checkLogin(this, onLogin);
		},
		methods: {
			JumpMyCoupon(){
				uni.navigateTo({
				    url: "/pages/mine/coupon/coupon"
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 分段器选项发生改变时触发
			onClickItem(e) {
				this.current = e
				console.log('e:',e)
				this.flag = e


			},
			// 获取活动信息
			getActive() {
				let data = {
					pageSize: this.pageSize,
					pageNo: this.pages
				}
				this.$request(this.$api.Coupons, data, "GET").then(res => {
					console.log("活动列表", res)
					if (res.code == 200) {
						let newList = [];
						// this.couponList=res.result.records;
						let filteredArray = res.result.records.filter(item => item.status === 1);
						console.log(filteredArray,'888');
						this.couponList = filteredArray.map(item => ({
							name: item.activityName,
							startTime: item.startTime,
							endTime: item.endTime,
							sub: 5,
							money: 20,
							status: 0,
							id:item.id,
						}));
						// this.couponList=JSON.parse(JSON.stringify(this.couponList))
						console.log(this.couponList,'999999');
						if(this.couponList==[]){
							this.noneFlag = true
						}else{
							this.noneFlag = false
						}
					}
				})
				this.Receive = true
			},
			jumpNext(item) {

				uni.showModal({
					title: '点击优惠券条目',
					content: '点击优惠券条目 = ' + JSON.stringify(item)
				})
			},
			// 拼接图片路径
			getBanner(photo) {
				if (this.domain === 'https://api.example.com/') {
					this.newDomain = "https://media.example.com//"
				} else if (this.domain === 'https://api.dev.example.com/') {
					this.newDomain = "https://api.dev.example.com//tcstore/"
				}
				return (this.newDomain + photo)
				console.log("图片路径", this.newDomain + photo)
			},
			// 点击领取
			// handelReceive(item,index) {		
			handelReceive(id) {
				let phone = this.$store.userInfo.phone;
				console.log("手机号", phone);
				if (!phone) {
					this.showModal = true;
					return;
				}
				this.activityId = id.activityId
				// 请求参数
				let data = {
					terminal: "wechat",
					userId: this.$store.state.userInfo.userId,
					phone: uni.getStorageSync("phone"),
					activityId: this.activityId
				}
				this.$request(this.$api.Receive, data, "GET").then(res => {
					if (res.code == 200) {
						console.log("点击领取，成功", res)
						uni.showToast({
							title: res.message,
							icon: "none",
							duration: 2000
						})
					} else if (res.code == 500) {
						console.log("点击领取，失败", res)
						uni.showToast({
							title: res.message,
							icon: "none",
							duration: 2000
						})
					}
				})
			},
			// 获取手机号
			getPhoneNumber(e) {
				// #ifndef APP-PLUS
				uni.login({
					success: (res) => {
						let code = res.code;
						// #ifdef MP-ALIPAY
						// #endif
						// #ifdef MP-WEIXIN
						let data = {
							cloudId: e.detail.cloudId || '',
							iv: e.detail.iv,
							encryptedData: e.detail.encryptedData,
							code: code,
						}
						this.$request(this.$api.WechatGetPhone, data, "POST").then(res => {
							if (res.returnCode == 'SUCCESS') {
								uni.showToast({
									title: '获取成功',
									icon: 'none'
								});
								let phone = res.data.split(":")[1].replace(/"/g, '')
								this.telephone = phone;
								this.postLogin();
							} else {
								uni.showToast({
									title: '获取失败',
									icon: 'none'
								});
							}
						})
						// #endif
					},
				})
				// #endif
			},
			// 提交
			postLogin() {
				let that = this;
				let data = {
					userId: that.$store.state.userInfo.userId,
					phone: that.telephone,
					captcha: '1',
				}
				if (that.telephone == "") {
					uni.showToast({
						title: '未填写手机号码',
						icon: "none"
					});
					return false;
				}
				if (!(/^1[3|4|5|6|7|8|9][0-9]\d{8,11}$/.test(that.telephone))) {
					uni.showToast({
						title: '手机号码格式不正确',
						icon: "none"
					});
					return false;
				}
				if (that.authCode == that.rightAuthCode) {
					that.$request(that.$api.TelephoneLogin, data).then(res => {
						if (res.returnCode == "SUCCESS") {
							that.$store.state.userInfo.phone = data.phone;
							uni.showModal({
								title: '绑定成功',
								content: '绑定成功',
								showCancel: false,
								success: res => {
									uni.navigateBack();
								},
							});
						} else {
							uni.showToast({
								title: res.returnMessage,
								icon: 'none'
							});
						}
						// 手机号码保存
						uni.setStorageSync("phone", this.telephone)
						console.log(uni.getStorageSync("phone"))
						getApp().globalData.phone = uni.getStorageSync("phone")
					})
				} else {
					uni.showToast({
						title: '验证码有误',
						icon: "none"
					});
				}
			},
			confirmModal() {
				this.showModal = false
			},
			closeModal() {
				this.showModal = false
			}
		},
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f1f1f1;
	}

	.swiper {
		padding: 10px 10px 0;
	}

	.list {
		// margin-top: 10px;
	}

	.bottomBox {
		position: fixed;
		bottom: 0;
		width: 100vw;
		height: 24vw;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: space-around;

		.myCoupon {
			padding: 0 40rpx;
			height: 80rpx;
			border-radius: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #004ea0;
			color: white;
		}
		.myCoupon2 {
			padding: 0 40rpx;
			height: 80rpx;
			width: 500rpx;
			border-radius: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #004ea0;
			color: white;
		}

		.dingyue {
			padding: 0 40rpx;
			height: 80rpx;
			border-radius: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border: #004ea0 1px solid;
			color: #004ea0;
		}

		// justify-content:center;
		// align-items: space-around;
	}


	.couponsBox {
		background-color: white;
		border-radius: 10rpx;
		width: 700rpx;
		height: 60vh;
		margin: 20rpx auto;
		padding-top: 40upx;
		padding-bottom: 30upx;
		display: flex;
		flex-direction: column;
		// justify-content: center;
		align-items: center;
		overflow: auto;
	}
	.none{
		margin-top: 200rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		image{
			width: 700rpx;
			height: 200rpx;
		}
		text{
			margin-top: 30rpx;
			color: #c7c7c7;
			font-size: 35rpx;
		}
	}

	.coupons-left {
		display: flex;
		border-right: 1px dashed red;
		min-width: 0;
		flex: 1;
	}

	.content {
		margin-left: 10px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.time-item {
		color: red;
	}

	.name {
		font-size: 18px;
		font-weight: normal;
	}

	.coupons-right {
		display: flex;
		align-items: center;
		width: 200rpx;
		justify-content: center;
	}

	.buttonClass {
		width: 90%;
		font-size: 14px;
		background-color: red;
		color: #fff;
	}

	.y {
		width: 90%;
		font-size: 14px;
		background-color: gray;
		color: #fff;
	}





	/* 弹框 */
	.page-body {
		width: 320px;
		text-align: center;
		font-size: 18px
	}

	/* 遮罩层 */
	.modalDlg-mask {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: #000;
		z-index: 9000;
		opacity: 0.5;
	}

	/* 弹出层 */
	.modalDlg {
		width: 70%;
		height: 30%;
		position: fixed;
		top: 25%;
		left: 0;
		right: 0;
		z-index: 9999;
		margin: 0 auto;
		background-color: #fff;
		border-radius: 5px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.modalDlg-content {
		margin: 20px 0;
	}

	.modalDlg-content-item {
		font-size: 15px;
	}

	.modalDlg-title {
		font-size: 18px;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx 0rpx;
	}


	.modalDlg-content {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 10rpx 0;
	}

	.modalDlg-content .modalDlg-content-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.modalDlg-content .modalDlg-content-item radio-group {
		width: 100%;
		color: #666;
	}

	.modalDlg-content .modalDlg-content-item .weui-check__label {
		display: flex;
		align-items: center;
	}

	.modalDlg-content .modalDlg-content-item .weui-cell__bd {
		line-height: 48rpx;
	}

	.modalDlg-content .modalDlg-content-item .weui-cell {
		padding: 20rpx;
		display: flex;
		flex-direction: row;
	}

	.modalDlg-footer {
		width: 100%;
		height: 100rpx;
		margin-top: 20px;
		/* 		border-top: 1rpx solid #ededed;
 */
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		justify-content: space-between;
	}

	/* 弹出层里面的文字 */
	.modalDlg .modalDlg-content text {
		text-align: justify;
		font-size: 28rpx;
		color: #666;
		/* margin-left:10px; */
	}

	/* 弹出层里面的按钮 */
	.modalDlg-btn {
		width: 80px;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		font-size: 28rpx;
		border-radius: 40rpx;
		margin: 0 auto;
	}

	.modalDlg .modalDlg-footer .closeBtn {
		background: #fff;
		color: #fc4141;
		border: 1rpx solid #fc4141;
	}

	.modalDlg .modalDlg-footer .confirmBtn {
		background: #fc4141;
		color: #fff;
	}
</style>